<template>
  <div>
    <strong>出货记录注：机器时间，是出货时机器记录的时间；上传服务器时间，是指交易数据到达服务器的时间。有可能机器时间和服务器时间存在时间差，是因为机器时间不准确或者数据延时上传。</strong>
    <br><br>
    <Card>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns"
        @on-delete="handleDelete" />
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为excel文件</Button>
      <!-- <Button style="position:absolute; top: 27px; right: 17px;" type="primary" @click="addConfig">Excel预约下载</Button> -->
    </Card>
    <Modal v-model="visible" :title="title" :mask-closable="false" width="800px" cancelText=" ">
      <tables ref="downloadTable" v-model="downloadTableData" :columns="downloadColumns" />
    </Modal>
  </div>
</template>

<script>
import Mock from 'mockjs'
import Tables from '_c/tables'
import {
  machineGroupNameValues,
  machineNumberValues,
  paymentTypes,
  commoditys,
  commonStates,
  shipStatusValues,
} from '@/mock/data/option-data.js'
import rcRequest from 'rc-request'
import jsCookie from 'js-cookie'

export default {
  name: 'discount_code_statis_page',
  components: {
    Tables
  },
  data() {
    return {
      columns: [
        { title: '货道', key: 'freightWay' },
        { title: '机器组名', key: 'machineGroupName' },
        { title: '机器编号', key: 'machineNum' },
        { title: '机器名', key: 'machineName' },
        { title: '商品编号', key: 'commodityNum' },
        { title: '商品名称', key: 'commodityName' },
        { title: '供应商', key: 'supplier' },
        { title: '支付类型', key: 'paymentType' },
        // { title: '卡号/序号', key: 'cardNum' },
        { title: '单价', key: 'unitPrice' },
        { title: '结果', key: 'result' },
        { title: '流水号', key: 'serialNum' },
        { title: '机器时间', key: 'machineDate' },
        { title: '服务器时间', key: 'serviceDate' },
        // {
        //   title: '操作',
        //   key: 'action',
        //   width: 140,
        //   render: (h, params) => {
        //     return h('div', [
        //       h('Button', {
        //         props: {
        //           type: 'warning',
        //           size: 'small',
        //           ghost: true,
        //         },
        //         on: {
        //           click: () => this.tableData.splice(params.index, 1)
        //         },
        //       }, '删除'),
        //     ]);
        //   }
        // }
      ],
      tableData: [],
      // Excel预约下载
      visible: false,
      title: 'Excel预约下载',
      downloadColumns: [
        { title: '申请时间', key: 'applyDate' },
        { title: '类型', key: 'paymentType' },
        { title: '文件名', key: 'fileName' },
        { title: '状态', key: 'state' },
        {
          title: '操作',
          key: 'action',
          width: 140,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small',
                  ghost: true,
                },
                on: {
                  click: () => this.downloadTableData.splice(params.index, 1)
                },
              }, '删除'),
            ]);
          }
        }
      ],
      downloadTableData: [],
    }
  },
  methods: {
    handleDelete(params) {
      console.log(params)
    },
    addConfig() {
      this.visible = true;
    },
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `出货记录-${(new Date()).valueOf()}.csv`
      })
    },
    // 获取列表数据
    async getListData() {
      const { data: { data } } = await rcRequest({
        method: 'post',
        url: '/pay/select_pay_shipping_record_info',
        data: { }
      })
      this.tableData = data.map(item => ({
        id: item.id,
        machineGroupName: item.machine_group_name,
        machineNum: item.machine_number,
        machineName: item.name,
        freightWay: item.aisle_id,
        commodityNum: item.product_coding,
        commodityName: item.product_name,
        supplier: item.manufacturer_name,
        paymentType: item.ptname,
        // cardNum: item.
        unitPrice: item.unit_price,
        result: shipStatusValues[item.shipment_status],
        serialNum: item.out_trade_no,
        machineDate: item.start_time,
        serviceDate: item.expire_time,
      }))
    },
  },
  mounted() {
    this.getListData()

    // 付款方式
    this.downloadTableData = Mock.mock({
      'list|5-10': [{
        'id|+1': 1,
        'applyDate': '@datetime()',
        'paymentType|1': paymentTypes,
        'fileName': '@ctitle(2, 5)' + '.doc',
        'state|1': commonStates,
      }],
    }).list;
  }
}
</script>

<style scoped></style>
